<template>
  <div class="home">
    <div class="carousel-contain">
      <v-carousel
        class="carousel d-none d-sm-block"
        cycle
        height="680px"
        hide-delimiters
        :show-arrows="false"
      >
        <v-carousel-item v-for="(item, i) in pclists" :key="i" :src="item" />
      </v-carousel>

      <v-carousel
        class="d-block d-sm-none"
        cycle
        height="485px"
        hide-delimiters
        :show-arrows="false"
      >
        <v-carousel-item v-for="(item, i) in mobilelists" :key="i" :src="item" />
      </v-carousel>
    </div>
    <StoreList style="margin-bottom: 16px" :store-list="storeList" @change="handleStoreChange" />
    <TourCarList style="background: #ffffff" :list="carList" />
  </div>
</template>

<script>
// import dayjs from 'dayjs';
import pageLoadingMixin from '~/plugins/pageLoadingMixin';

export default {
  name: 'Tour',
  mixins: [pageLoadingMixin],
  data() {
    return {
      form: {
        // start_time: this.$route.query.time || dayjs().startOf('day').format('YYYY-MM-DD HH:mm'),
        // end_time: this.$route.query.time || dayjs().startOf('day').format('YYYY-MM-DD HH:mm'),
        sort: ''
      },
      pclists: [require('~/assets/tour-pc.jpg')],
      mobilelists: [require('~/assets/tour-mobile.jpg')],
      carList: [],
      storeList: []
    };
  },
  async fetch() {
    await Promise.allSettled([this.getStoreList(), this.search()]);
  },
  head() {
    return {
      title: this.$t('JDMTour.title'),
      meta: [{ hid: 'description', name: 'description', content: this.$t('JDMTour.description') }]
    };
  },
  methods: {
    async getStoreList() {
      const res = await this.$api.post('/stores/getStoreListByLongLat', {});
      this.storeList = res;
    },
    async search(params) {
      const res = await this.$api.post('/product/searchList', {
        ...this.form,
        sale_type: 'tour',
        ...params
      });
      this.carList = res.list;
    },
    handleStoreChange(val) {
      this.search({ storeId: val?.id });
    }
  }
};
</script>
<style scoped lang="scss">
.txt-contain {
  position: absolute;
  z-index: 9;
  top: 160px;
  left: 5.4vw;
  color: #ffffff;
  h2 {
    font-size: 55px;
  }
}
.carousel {
  background-color: #ececec;
}

.search-condition {
  height: 110px;
  background: #ffffff;
  box-shadow: 0px 20px 60px 0px rgba(167, 174, 174, 0.08);
}

.more-condition {
  height: 82px;
  background: #fbfbfb;
}

.btn {
  margin-top: -5px;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 200px;
  height: 40px !important;
  background: rgb(252, 246, 246) !important;
  border-radius: 28px;
  border: 1px solid #fad8da;
  font-family: Poppins, Poppins;
  font-weight: 600;
  font-size: 16px;
  color: #e42129;
  line-height: 25px;
  text-align: center;
  font-style: normal;
  box-shadow: none;
}
</style>
<style>
.v-image__image--cover {
  background-position: 50% 40% !important;
}
</style>
